import React from 'react';
import { Layout, Menu } from 'antd';
import {
  PieChartOutlined,
  HomeOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Sider } = Layout;

const Sidebar = ({ collapsed, setCollapsed }) => {
  const navigate = useNavigate();

  return (
    <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
      <div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<HomeOutlined />} onClick={() => navigate('/')}>
          首页
        </Menu.Item>
        <Menu.Item key="2" icon={<PieChartOutlined />} onClick={() => navigate('/todolist')}>
          TodoList
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default Sidebar;